import React from 'react'
import { Form, Input, Button } from 'antd'

export default function FormUseForm() {
    // 1. 解构出form对象
    const [form] = Form.useForm();
    const finishHandle = (values:any)=>{
        // 3. 通过form获取表单的值
        let data = form.getFieldsValue();
        console.log('data: ', data);
        console.log('values: ', values);
    }
    // 清空表单数据
    const clearForm = ()=>{
        form.resetFields();
    }
    return (
        <Form
            labelCol={{ span: 6 }}
            onFinish={finishHandle}
            // 2. 绑定form
            form={form}
        >
            <Form.Item
                name='username'
                label='用户名'
            >
                <Input />
            </Form.Item>

            <Form.Item
                name='password'
                label='密码'
            >
                <Input.Password />
            </Form.Item>

            <Form.Item
                wrapperCol={{ offset: 6, span: 16 }}
            >
                <Button htmlType='submit'>提交</Button>
                <Button onClick={clearForm}>清空表单</Button>
            </Form.Item>
        </Form>
    )
}
